<template>
	<div class="multi-images">
		<div class="img-counter">{{defaultIndex+1}}/{{picarray.length}}</div>
		<mt-swipe @change="handleChange" :defaultIndex="imageIndex" :auto="0" :show-indicators="false" style="width: 100%;">
			<mt-swipe-item v-for="(item , index) of picarray" class="multi-li" :key="index">
				<div class="img-container">
					<img v-lazy="item.src||item.url+'?imageslim'" alt="" @click="diminish" style="width: 100%">

					<!--||item.url-->
				</div>
				<div class="save-img" @click="saveimg(defaultIndex)"></div>
			</mt-swipe-item>
		</mt-swipe>

		<!--<ul class="multi-ul" ref="multiUl">-->
		<!--<li v-for="(item , index) of picarray" class="multi-li">-->
		<!--<div class="img-container">-->
		<!--<img ref="myimg" @touchmove="mytouchmove(index)" @touchstart="mytouchstart(index)" v-lazy="item.src" alt="" @click="diminish">-->
		<!--</div>-->
		<!--</li>-->
		<!--</ul>-->
		<!--<button class="arrow-button left-img yl-imgback" @click="arrowLeft"></button>-->
		<!--<button class="arrow-button right-img yl-imgforward" @click="arrowRihgt"></button>-->
	</div>
</template>
<script>
export default {
	data() {
		return {
			defaultIndex: this.imageIndex,
			msg: '多张图片'
		}
	},

	props: ['picarray', 'imageIndex'],
	methods: {
		handleChange(index) {
			//console.log(index)
			//let loadmore = document.getElementsByClassName("loadmore-ul")
			//if(loadmore.length > 0) loadmore[0].style.transform = "" ;
			this.defaultIndex = index
		},
		//		  clickImg(event){
		//        let viewImage = this.$refs.viewImage ;
		//        let betterscroll = this.$refs ;
		//        this.showImg = true ;
		//      },
		//      viewImg () {
		//	      	this.showImg = false;
		//      },
		////		  	朝左
		//	        arrowLeft () {
		//	        	let multiUl = this.$refs.multiUl ;
		//	        	if(this.imgIndex == 1){
		//	        		multiUl.style.marginLeft = '-'+parseInt(this.picarray.length-1)*100 + 'vw' ;
		//	        		this.imgIndex = parseInt(this.picarray.length) ;
		//	        	}else{
		//	        		this.imgIndex -= 1 ;
		//	        		multiUl.style.marginLeft = '-'+(this.imgIndex-1)*100+'vw' ;
		//	        	}
		//	        },
		//	        //朝右
		//	        arrowRihgt () {
		//	        	let multiUl = this.$refs.multiUl ;
		//	        	if(this.imgIndex < this.picarray.length){
		//	        		multiUl.style.marginLeft = '-'+(this.imgIndex)*100 + 'vw' ;
		//	        		this.imgIndex += 1 ;
		//	        	}else{
		//	        		multiUl.style.marginLeft = '0' ;
		//	        		this.imgIndex = 1 ;
		//	        	}
		//	        },
		//图片变小
		diminish() {
			this.$emit('diminish');
		},
		saveimg(index) {
			this.$emit('saveimg',index);
		}
	},
	components: {
		//viewImage
	}
}
</script>
<style scoped>
/***
	 *  遮罩层
	 */

.multi-images {
	position: fixed;
	z-index: 3;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, 1);
	width: 100vw;
	height: 100vh;
}



/***
	 *  图片计数器
	 */

.img-counter {
	position: absolute;
	left: 0;
	top: 0;
	height: 44px;
	font-size: 13px;
	line-height: 44px;
	color: white;
	opacity: 0.75;
	padding: 0 10px;
	z-index: 1;
}

.multi-ul {
	width: 10000vw;
}



/***
	 *一堆图片列表
	 */

.multi-li {
	float: left;
}

.img-container {
	height: 100vh;
	width: 100vw;
	line-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: Center;
}

.multi-li img {
	max-width: 100%;
	display: inline-block;
}

.arrow-button {
	background: none;
	top: 50%;
	margin-top: -50px;
	width: 70px;
	height: 100px;
	position: absolute;
	float: left;
	will-change: opacity;
	border: 0;
}

.left-img {
	left: 0;
}

.right-img {
	right: 0;
}

.save-img {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 44px;
	font-size: 13px;
	line-height: 44px;
	color: white;
	opacity: 0.75;
	padding: 0 10px;
	z-index: 1;
}
</style>
